<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta author="mohit" content="https://github.com/mohit2404" />
    <title>3D card flip transition with pure css Joker Art</title>
    <link rel="stylesheet" href="styles.css" media="all" />
  </head>
  <body>
    <main class="main">
      <div class="card-container">
        <input class="input" type="checkbox" id="flip" />
        <label class="label" for="flip"></label>
        <div class="the-card">
          <!-- front side of card -->
          <div class="card-box-front">
            <div class="cb-top">
              <div class="name">
                <span>J</span>
                <span>O</span>
                <span>K</span>
                <span>E</span>
                <span>R</span>
              </div>
              <div class="upper-part">
                <div class="triangle">
                  <span class="t-circle"></span>
                </div>
                <div class="upper-circle"></div>
                <div class="lower-circle"></div>
                <div class="outer-circle">
                  <div class="inner-circle"></div>
                </div>
                <div class="up-box">
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
              <div class="top-left-side">
                <div class="tls-top"></div>
                <div class="tls-left"></div>
                <div class="tls-right"></div>

                <div class="bls-bottom"></div>
                <div class="bls-right"></div>
                <div class="bls-left">
                  <span class="dot"></span>
                </div>
              </div>
              <div class="top-right-side">
                <div class="trs-top"></div>
                <div class="trs-left"></div>
                <div class="trs-right"></div>

                <div class="brs-bottom"></div>
                <div class="brs-right"></div>
                <div class="brs-left">
                  <span class="dot"></span>
                </div>
              </div>

              <div class="middle-left-side">
                <div class="mls-top"></div>
                <div class="mls-left"></div>
                <div class="mls-right"></div>

                <div class="mlsb-top"></div>
                <div class="mlsb-left">
                  <span class="span3"></span>
                  <span class="span2"></span>
                  <span class="span1"></span>
                </div>
                <div class="mlsb-right"></div>
              </div>
              <div class="middle-right-side">
                <div class="mrs-top"></div>
                <div class="mrs-left">
                  <span class="span"></span>
                </div>
                <div class="mrs-right"></div>

                <div class="mrsb-top"></div>
                <div class="mrsb-left"></div>
                <div class="mrsb-right"></div>
                <div class="triangle">
                  <span class="t-circle"></span>
                </div>
              </div>

              <div class="mouth1">
                <div class="right"></div>
                <div class="r-middle"></div>
                <div class="m-line"></div>
                <div class="l-middle"></div>
                <div class="left"></div>
              </div>
            </div>
            <div class="cb-bottom">
              <div class="name">
                <span>J</span>
                <span>O</span>
                <span>K</span>
                <span>E</span>
                <span>R</span>
              </div>
              <div class="upper-part">
                <div class="triangle">
                  <span class="t-circle"></span>
                </div>
                <div class="upper-circle"></div>
                <div class="lower-circle"></div>
                <div class="outer-circle">
                  <div class="inner-circle"></div>
                </div>
                <div class="up-box">
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
              <div class="top-left-side">
                <div class="tls-top"></div>
                <div class="tls-left"></div>
                <div class="tls-right"></div>

                <div class="bls-bottom"></div>
                <div class="bls-right"></div>
                <div class="bls-left">
                  <span class="dot"></span>
                </div>
              </div>
              <div class="top-right-side">
                <div class="trs-top"></div>
                <div class="trs-left"></div>
                <div class="trs-right"></div>

                <div class="brs-bottom"></div>
                <div class="brs-right"></div>
                <div class="brs-left">
                  <span class="dot"></span>
                </div>
              </div>

              <div class="middle-left-side">
                <div class="mls-top"></div>
                <div class="mls-left"></div>
                <div class="mls-right"></div>

                <div class="mlsb-top"></div>
                <div class="mlsb-left">
                  <span class="span3"></span>
                  <span class="span2"></span>
                  <span class="span1"></span>
                </div>
                <div class="mlsb-right"></div>
              </div>
              <div class="middle-right-side">
                <div class="mrs-top"></div>
                <div class="mrs-left">
                  <span class="span"></span>
                </div>
                <div class="mrs-right"></div>

                <div class="mrsb-top"></div>
                <div class="mrsb-left"></div>
                <div class="mrsb-right"></div>
                <div class="triangle">
                  <span class="t-circle"></span>
                </div>
              </div>

              <div class="mouth1">
                <div class="right"></div>
                <div class="r-middle"></div>
                <div class="m-line"></div>
                <div class="l-middle"></div>
                <div class="left"></div>
              </div>
            </div>
          </div>

          <!-- back side of card -->
          <div class="card-box-back">
            <div class="bg1"></div>
            <div class="bg2">
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
            </div>
            <div class="bg-1"></div>
            <div class="bg-1-dotted-circle">
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
            </div>
            <div class="bg-2"></div>
            <div class="bg-2-dotted-circle">
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
              <div class="row"></div>
            </div>
            <div class="circle">
              <img
                src="https://avatars.githubusercontent.com/u/109670799?v=4"
                alt="logo"
              />
            </div>
            <div class="content">
              <strong>Mohit</strong>
              <p>If you have any suggestions please please let me know</p>
              <a class="id-link" href="https://github.com/mohit2404">Profile</a>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>
